<template>
  <el-card class="main-card">
    <div class="title">{{ this.$route.name }}</div>
    <!-- 表格操作 -->
    <div class="operation-container">
      <!-- 条件筛选 -->
      <div style="margin-left: auto">
        <el-input
            v-model="baidu.baiduName"
            prefix-icon="el-icon-search"
            size="small"
            placeholder="请输入昵称"
            style="width: 200px"
            @keyup.enter.native="searchUsers" />
        <el-button type="primary" size="small" icon="el-icon-search" style="margin-left: 1rem" @click="searchUsers">
          搜索
        </el-button>
        <el-button type="primary" size="small" icon="el-icon-warning" style="margin-left: 1rem" @click="genUrl">
          生成链接
        </el-button>
      </div>
    </div>
    <!-- 表格展示 -->
    <el-table border :data="userList" v-loading="loading">
      <!-- 表格列 -->
      <el-table-column prop="avatarUrl" label="头像" align="center" width="100">
        <template #default="{row}">
          <img :src="row['avatarUrl']" width="40" height="40" />
        </template>
      </el-table-column>
      <el-table-column prop="id" label="用户ID" align="center" width="140" />
      <el-table-column prop="baiduName" label="百度帐号" align="center" width="140" />
      <el-table-column prop="loginType" label="会员类型" align="center" width="auto">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.vipType === 1">普通会员</el-tag>
          <el-tag v-if="scope.row['vipType'] === 2">超级会员</el-tag>
          <el-tag type="danger" v-if="scope.row.vipType === 0">普通用户</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="netdiskName" label="网盘帐号" align="center" width="140" />
      <el-table-column prop="scope" label="scope" width="130" align="center"/>
      <!-- 列操作 -->
      <el-table-column label="操作" align="center" width="auto">
        <template #default="scope">
          <el-button type="primary" size="mini" @click="openEditModel(scope.row)"> 查看 </el-button>
          <el-button type="primary" size="mini" @click="openImageModel(scope.row,20)"> 图片 </el-button>
          <el-button type="primary" size="mini" @click="refreshToken(scope.row)"> 刷新 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
        class="pagination-container"
        background
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="current"
        :page-size="size"
        :total="count"
        :page-sizes="[10, 20]"
        layout="total, sizes, prev, pager, next, jumper" />
    <!-- 修改对话框 -->
    <el-dialog :visible.sync="isEdit" width="80%">
      <div class="dialog-title-container" slot="title">查看详情</div>
      <el-button type="warring" @click="back">BACK</el-button>
      <el-table
          :data="userDetailList"
          style="width: 100%"
          v-loading="loadingDiaLog"
      >
        <el-table-column
            prop="path"
            label="绝对路径"
            width="180">
        </el-table-column>
        <el-table-column
            prop="server_filename"
            label="文件名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="size"
            label="文件大小">
        </el-table-column>
        <el-table-column
            prop="isdir"
            label="是否为目录">
        </el-table-column>
        <el-table-column
            prop="category"
            label="类型">
          <template #default="{row}">
            <el-tag type="warning" v-if="row.category === 1" >视频</el-tag>
            <el-tag type="warning" v-if="row.category === 2" >音频</el-tag>
            <el-tag type="warning" v-if="row.category === 3" >图片</el-tag>
            <el-tag type="warning" v-if="row.category === 4" >文档</el-tag>
            <el-tag type="warning" v-if="row.category === 5" >应用</el-tag>
            <el-tag type="warning" v-if="row.category === 6" >其他</el-tag>
            <el-tag type="warning" v-else >种子</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="dir_empty"
            label="子目录">
          <template #default="{row}">
            <el-tag type="warning" v-if="row.isdir === 1 && row.dir_empty === 1">空目录</el-tag>
            <el-tag type="success" v-else>目录</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="auto">
          <template #default="scope">
            <el-button type="primary" v-if="scope.row['isdir'] === 1" size="mini" @click="enterDir(scope.row)"> 进入 </el-button>
            <el-button type="primary" v-else size="mini" @click="downLoadFile(scope.row)"> 下载 </el-button>
          </template>
        </el-table-column>

      </el-table>

      <div slot="footer">
        <el-button @click="isEdit = false">取 消</el-button>
        <el-button type="primary" @click="editUserRole"> 确 定 </el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="isDownLoadUrlVal">
      <el-input id="URL_ID" v-model="dowonloadUrl" type="textarea" :rows="10"></el-input>
      <div slot="footer">
        <el-button @click="isDownLoadUrlVal = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="isImageModelVal"  width="60%" v-loading="isImageModelLoading">
      <el-input
          v-model="pageNo"
          prefix-icon="el-icon-search"
          size="small"
          placeholder="页码"
          style="width: 200px"
          @keyup.enter.native="searchUsers" />
      <el-button type="primary" size="small" icon="el-icon-search" style="margin-left: 1rem" @click="getImageList(20)">
        搜索
      </el-button>
      <div style="display: flex;gap: 10px;justify-content: flex-start;align-items: center;flex-wrap: wrap">
        <div v-for="url in imageList" :key="url['fs_id']" style="width: 100px" @click="previewImage(url['thumbs']['url3'])">
          <el-card >
            <el-image :preview-src-list="srcList"  fit="fill"   :src="url['thumbs']['url1']" lazy ></el-image>
          </el-card>
        </div>
      </div>

    </el-dialog>
  </el-card>
</template>

<script>
import { copyDomText } from "@/utils/userUtil";

export default {
  created() {
    this.listUsers()
    this.listRoles()
  },
  data: function () {
    return {
      pageNo:1,
      imageList:[],
      srcList:[],
      loading: true,
      isImageModelVal: false,
      isImageModelLoading: false,
      isEdit: false,
      isDownLoadUrlVal: false,
      userForm: {
        userInfoId: null,
        nickname: ''
      },
      baidu:{
        id: null,
        baiduName: null,
        loginType: null,
        netdiskName: null,
        acessToken: null,
        refreshToken: null,
        scope: null,
        vipType: null,
        avatarUrl: null,
      },
      userDetail:{},

      loginType: null,
      userRoles: [],
      roleIds: [],
      userList: [],
      userDetailList: [],
      loadingDiaLog:false,

      typeList: [
        {
          type: 1,
          desc: '邮箱'
        },
        {
          type: 2,
          desc: 'QQ'
        },
        {
          type: 3,
          desc: '微博'
        }
      ],
      keywords: null,
      current: 1,
      size: 10,
      count: 0,
      dowonloadUrl: '',
      path:''
    }
  },
  methods: {
    genUrl(){
      this.axios.get('/api/baidu/getLink').then(({data:{data}}) => {
            const h = this.$createElement;
            this.$msgbox({
              title: '消息',
              message: h('p',{
                attrs:{
                  id:"copyText"
                }
              },data
              )

            }).then(action => {
              copyDomText("copyText")
              this.$message("复制成功")
            });

      })
    },
    previewImage(url){
      this.srcList = [url]
    },
    downLoadFile(row){
      let fids = '['+row['fs_id']+']'
      //得到文件详细信息
      this.axios.get(`/baidu/multimedia?method=filemetas&access_token=${this.userDetail.acessToken}&dir=${row.path}&fsids=${fids}&dlink=1`).then(({data:{list}}) => {
         let url=`${list[0]['dlink']}?fid=${row['fs_id']}&access_token=${this.userDetail.acessToken}`
        this.dowonloadUrl=url
        this.isDownLoadUrlVal=true

      })
    },
    back(){
      this.enterDir({path: '/'})
    },

    enterDir(row){
      this.loadingDiaLog=true
      this.path=row.path
      this.axios.get(`/baidu/file?method=list&access_token=${this.userDetail.acessToken}&dir=${row.path}`).then(({data:{list}}) => {
        this.userDetailList=[...list]
        this.loadingDiaLog=false
      })
      setTimeout(()=>{
        this.loadingDiaLog=false
      },10000)
    },
    openImageModel(row,num){
      this.userDetail={...row}

      this.isImageModelVal=true
      this.getImageList(num)

    },
    getImageList(num){
      this.isImageModelLoading=true
      this.imageList=[...[]]
      this.axios.get(`/baidu/file?method=imagelist&access_token=${this.userDetail.acessToken}&page=${this.pageNo}&num=${num}&web=1`).then(({data:{info}}) => {
        console.log(info)
        this.imageList=[...info]
        this.isImageModelLoading=false
      })
      setTimeout(()=>{
        this.isImageModelLoading=false
      },10000)
    },
    searchUsers() {
      this.current = 1
      this.listUsers()
    },
    sizeChange(size) {
      this.size = size
      this.listUsers()
    },
    currentChange(current) {
      this.current = current
      this.listUsers()
    },
    openEditModel(user) {
      this.userDetail={...user}
      this.getBaiduFileList(user)


      this.isEdit = true
    },
    refreshToken(user){
      this.userDetail={...user}

      this.axios.get(`/api/baidu/refreshToken?id=${user.id}`).then(res => {
        this.$message.success('刷新成功')
      })
    },
    //得到百度文件列表
    getBaiduFileList(user){
      this.axios.get(`/baidu/file?method=list&access_token=${user.acessToken}`).then(({data:{list}}) => {

        this.userDetailList=[...list]
      })
    },
    editUserRole() {
      this.userForm.roleIds = this.roleIds
      this.axios.put('/api/admin/users/role', this.userForm).then(({ data }) => {
        if (data.flag) {
          this.$notify.success({
            title: '成功',
            message: data.message
          })
          this.listUsers()
        } else {
          this.$notify.error({
            title: '失败',
            message: data.message
          })
        }
        this.isEdit = false
      })
    },
    listUsers() {
      this.axios
          .get('/api/baidu/', {
            params: {
              current: this.current,
              size: this.size,
              baiduName:this.baidu.baiduName
            }
          })
          .then(({ data }) => {
            this.userList = data.data['records']
            this.count = data.data.total
            this.loading = false
          })
    },
    listRoles() {
      this.axios.get('/api/admin/users/role').then(({ data }) => {
        this.userRoles = data.data
      })
    }
  },
  watch: {
    loginType() {
      this.current = 1
      this.listUsers()
    }
  }
}
</script>
